<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue和jquery异步获取数据对比</title>
    <style type="text/css">
        div{
            margin: 20px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<!-- vue绑定数据 -->
<div class="vue-box">
    <p>{{ name }}</p>
    <p>{{ age }}</p>
</div>

<!-- vue ajax获取数据 -->
<div class="vue-ajax">
    <h1 class="bjy-category">{{ posts.category }}</h1>
    <ul class="bjy-article" v-for="item in posts.article">
        <li class="bjy-title">{{ item.title }}</li>
        <li class="bjy-author">{{ item.author }}</li>
    </ul>
</div>

<!-- jquery ajax获取数据 -->
<div class="jquery-ajax">
    
</div>

<!-- 引入veujs -->
<script src="./js/vue.js"></script>
<!-- 引入用于配合vuejs执行ajax操作的插件 -->
<script src="./js/vue-resource.min.js"></script>

<script>
    // 直接绑定数据
    var vm=new Vue({
        el:'.vue-box',
        data:{
            name: '小明',
            age: 20
        }
    })

    // ajax 获取数据
    var vm2=new Vue({
        el: '.vue-ajax',
        data: {
            posts:{}
        },
        // 页面加载的时候会自动执行ready
        ready: function(){
            // 等同于jquery的$.get()
            this.$http.get('data.php').then(function(response){
                    this.posts=response.data;
                })
        }
    });
</script>


<!-- 引入jquery --> 
<script src="./js/jquery-1.10.2.min.js"></script>
<script>
    // 用jquery的方式实现
    $.get('data.php', function(data) {
        var str='<h1 class="bjy-category">'+data.category+'</h1>';
        $.each(data.article, function(index, val) {
            str +='<ul class="bjy-article"><li class="bjy-title">'+val.title+'</li><li class="bjy-author">'+val.author+'</li></ul>';
        });
        $('.jquery-ajax').html(str);
    },'json');
</script>
</body>
</html>